import {CommonComponentProps} from "../../../components/editor/interface.ts";
import {useMateRailDrop} from "../../hooks/useMaterialDrop.ts";
import {useDrag} from "react-dnd";
import {useEffect, useRef} from "react";


function Modal({ id, children, title, styles ,name}: CommonComponentProps) {
    const modalRef = useRef(null)

    const {canDrop, drop } = useMateRailDrop(['Button', 'Container','Table','Form'], id);
    const [_,drag] = useDrag({
        type:"Modal",
        item:{
            id,
            type:name,
            dragType:"move"
        }
    })

    useEffect(() => {
        drop(modalRef)
        drag(modalRef)
    }, []);

    return (
        <div
            ref={modalRef}
            style={styles}
            data-component-id={id}
            className={`min-h-[100px] p-[20px] ${ canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
        >
            <h4>{title}</h4>
            <div>
                {children}
            </div>
        </div>
    );
}

export default Modal;
